<template>
  <div class="lsc-order-list">
    <van-panel 
    title="订单号" 
    :desc="details.orderno" 
    :status="details.op_status==0 ? '未审核' :
            details.op_status==1 ? '已审核' :
            details.op_status==2 ? '已下料' :
            details.op_status==3 ? '已报价' :
            details.op_status == 4 ? '取消' : 
            details.op_status == 6 ? '已发货' : '已打印'">
      <div class="lsc-order-list-box">
        <van-card
          v-for="item in details.items"
          :key="item.id"
          :title="item.name"
          :desc="item.model_no"
          :num="item.qty"
          :thumb="item.img_url"
        >
          <div slot="footer" v-if="item.prt_type == 1">
            <van-icon name="arrow" style="font-size:14px;" @click="showDemandDetail(item.id)"/>
          </div>
        </van-card>
      </div>
      <van-cell-group>
        <van-field
          :value="details.remark"
          label="备注"
          type="textarea"
          rows="1"
          autosize
          disabled
        />
        <van-field
          :value="details.createtime"
          label="提交日期"
          disabled
        />
      </van-cell-group>
    </van-panel>
    
    <!-- 查看产品详情 -->
    <van-popup v-model="showGoodsDetails" position="right" style="width:100%;height:100%;overflow:auto;">
      <van-nav-bar
        title="产品具体要求"
        left-arrow
        @click-left="onBackOrderlist"
      />
      <van-field
        v-model="demandDetails.prt_width"
        label="成品宽(m)"
        placeholder=""
        class="lsc-goods-details-input"
        disabled
      />
      <van-field
        v-model="demandDetails.prt_height"
        label="成品高(m)"
        placeholder=""
        class="lsc-goods-details-input"
        disabled
      />
      <van-field
        v-model="demandDetails.zheshu"
        label="褶数(倍)"
        placeholder=""
        class="lsc-goods-details-input"
        disabled
      />
      <van-cell title="对/单开" is-link :value="demandDetails.opentype"/>
      <van-cell title="打孔/捏褶" is-link :value="demandDetails.dakong"/>
      <van-switch-cell v-model="demandDetails.is_qianxian" title="铅线" disabled />
      <van-switch-cell v-model="demandDetails.is_qiankuai" title="铅块" disabled />
      <!-- <van-cell><van-checkbox class="lsc-details-pro-checkbox" v-model="choose.lichen" name="1" disabled>里衬</van-checkbox></van-cell> -->
      <van-switch-cell v-model="choose.lichen" disabled title="里衬" />
      <div class="lsc-details-pro-checkbox-box" ref="lic" :style="{ 'display': choose.lichenNo===null ? 'none' : 'block' }"> 
        <van-cell title="型号" is-link :value="choose.lichenNo"/>
        <!-- <van-field
          v-model="choose.lichenVal"
          label="宽度"
          placeholder=""
          class="lsc-goods-details-input"
          disabled
        /> -->
      </div>
      <!-- <van-cell><van-checkbox class="lsc-details-pro-checkbox" v-model="choose.zaoxing" name="2" disabled>造型</van-checkbox></van-cell> -->
      <van-switch-cell v-model="choose.zaoxing" disabled title="造型" />
      <div class="lsc-details-pro-checkbox-box" ref="model" :style="{ 'display': choose.zaoxingNo===null ? 'none' : 'block' }"> 
        <van-cell title="型号" is-link :value="choose.zaoxingNo"/>
        <van-field
          v-model="choose.zaoxingVal"
          label="宽度"
          placeholder=""
          class="lsc-goods-details-input"
          disabled
        />
      </div>
      <!-- <van-cell><van-checkbox class="lsc-details-pro-checkbox" v-model="choose.huangGou" name="3" disabled>环/s钩</van-checkbox></van-cell> -->
      <van-switch-cell v-model="choose.huangGou" disabled title="环/s钩" />
      <div class="lsc-details-pro-checkbox-box" ref="sgou" :style="{ 'display': choose.huangGouNo===null ? 'none' : 'block' }"> 
        <van-cell title="型号" is-link :value="choose.huangGouNo"/>
      </div>
      <!-- <van-field
        v-model="demandDetails.remark"
        label="备注"
        placeholder="请输入备注"
        class="lsc-goods-details-input"
        disabled
      /> -->

    </van-popup>
    <div class="lsc-loading" v-if="isLoading">
      <div class="lsc-loading-mask"></div>
      <van-loading color="black" />
    </div>
  </div>
</template>

<script>
import api from '../../api'
import { mapGetters } from 'vuex'

export default {
  name: 'orderlist',
  computed: {
    ...mapGetters({
      isLoading: 'getLoading'
    })
  },
  data () {
    return {
      showGoodsDetails: false,
      details: {},
      demandDetails: {},
      choose: {
        lichen: false,
        zaoxing: false,
        huangGou: false,
        lichenVal: '',
        zaoxingVal: '',
        lichenNo: '',
        zaoxingNo: '',
        huangGouNo: '',
        radioLichen: '',
        radioZaoxing: '',
        radioHuangGou: '',
        chooseModelNo: ''
      }
    }
  },
  created() {
    let oid = this.$route.query.id
    this.getOrderDetails(oid)
  },
  methods: {
    onBackOrderlist() {
      this.showGoodsDetails = false
    },
    getOrderDetails(id) {

      this.$store.dispatch('fetchLoading', true)
      this.axios.get(api.qsSys.detail, {params: {id: id}})
        .then((res) => {
          this.$store.dispatch('fetchLoading', false)
          if (res.data.retcode != 0) {
            this.$toast.fail(res.data.retmsg);
          }else {
            this.details = res.data.data
          }
        })
    },
    showDemandDetail(id) {
      this.showGoodsDetails = true
      
      this.$store.dispatch('fetchLoading', true)
      this.axios.get(api.qsSys.orderPrtDemand, {params: {detail_id: id}})
        .then((res) => {
          this.$store.dispatch('fetchLoading', false)
          if (res.data.retcode != 0) {
            this.$toast.fail(res.data.retmsg);
          }else {
            this.demandDetails = res.data.data
            // this.choose.radioLichen = this.demandDetails.lichen.sub_prt_id
            // this.choose.radioZaoxing = this.demandDetails.zaoxing.sub_prt_id
            // this.choose.radioHuangGou = this.demandDetails.huang_gou.sub_prt_id
            
            // this.choose.lichenNo = this.demandDetails.lichen.model_no
            // this.choose.zaoxingNo = this.demandDetails.zaoxing.model_no
            // this.choose.huangGouNo = this.demandDetails.huang_gou.model_no

            // this.choose.lichenVal = this.demandDetails.lichen.attribute_val
            // this.choose.zaoxingVal = this.demandDetails.zaoxing.attribute_val

            this.choose = {
              radioLichen : this.demandDetails.lichen.sub_prt_id,
              radioZaoxing : this.demandDetails.zaoxing.sub_prt_id,
              radioHuangGou : this.demandDetails.huang_gou.sub_prt_id,
              lichenNo : this.demandDetails.lichen.model_no,
              zaoxingNo : this.demandDetails.zaoxing.model_no,
              huangGouNo : this.demandDetails.huang_gou.model_no,
              lichen : (this.demandDetails.lichen.model_no === null ? false : true),
              zaoxing : (this.demandDetails.zaoxing.model_no === null ? false : true),
              huangGou : (this.demandDetails.huang_gou.model_no === null ? false : true),
              lichenVal : this.demandDetails.lichen.attribute_val,
              zaoxingVal : this.demandDetails.zaoxing.attribute_val,
            }
          }
        })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.lsc-order-list .van-cell__right-icon .van-icon-delete:before {
  font-size: 15px;
}
.lsc-order-list .van-card__row {
  margin-top: 8px;
}
.lsc-order-list .lsc-order-list-box {
  margin-bottom: 20px;
}
.lsc-order-list .lsc-order-list-total .van-field__control {
  text-align: right;
  font-size: 18px;
}

.lsc-order-list .lsc-goods-details-input>.van-cell__value>.van-field__control {
  text-align: right;
}
.lsc-order-list .lsc-details-pro-checkbox>i {
  float: right;
}
.lsc-order-list .lsc-details-pro-checkbox>span {
  margin-left: 0;
}
.lsc-order-list .lsc-details-pro-checkbox>i {
  float: right;
}
.lsc-order-list .lsc-details-pro-checkbox>span {
  margin-left: 0;
}

.lsc-order-list .lsc-details-pro-checkbox-box {
  padding: 0 20px;
  background-color: #e5e5e5;
}
.lsc-order-list .lsc-details-pro-checkbox-box .van-cell,
.lsc-order-list .lsc-details-pro-checkbox-box .van-field__control {
  background-color: #e5e5e5;
}
.lsc-order-list .lsc-details-pro-checkbox-box .van-cell--clickable {
  border-bottom: 1px solid rgb(131, 131, 131);
}
.lsc-order-list .lsc-details-pro-checkbox-box .van-cell--clickable:last-child {
  border-bottom: 0;
}
</style>
